<template>
    <div class="footer">
        <div v-for="(item,index) in icons" @click="locationHref(item.url)">
            <div>
                <i class="iconfont"
                   :class="{ [item.icon]: $route.path != item.url, [item.active]: $route.path == item.url, 'active': $route.path == item.url}"></i>
            </div>
            <div class="menu-name" :class="{'active': $route.path == item.url}">
                {{item.name}}
            </div>
        </div>
    </div>
</template>

<script>
    export default {
        name:'footer',

        data() {
            return {
                icons:[
                    {
                        icon:'icon-zhuangxiuicon-5',
                        active:'icon-zhuangxiuicon-6',
                        name:'贵宾服务',
                        url:'/home/main'
                    },
                    {
                        icon:'icon-zhuangxiuicon-8',
                        active:'icon-zhuangxiuicon-7',
                        name:'实时监控',
                        url:'/home/time'
                    },
                    {
                        icon:'icon-zhuangxiuicon---',
                        active:'icon-gerenicon-',
                        name:'个人中心',
                        url:'/home/person'
                    },
                ]
            }
        },

        methods:{
          locationHref(url) {
              this.$router.push(url);
          }
        },

        mounted() {
            console.log(this.$route);
        }
    }
</script>

<style lang="less" scoped rel="stylesheet/less" type="text/css">
    @import '../../plugins/assets/css/flex.less';
    .footer {
        position: fixed;
        left:0;
        bottom:0;
        .box-sizing;
        border-top:1px solid #E9E9E9;
        width: 100%;
        background: #fff;
        padding: 2vw 5vw;
        z-index: 600;
        .flex-between;
        > div {
            color: #ACACAC;
            :first-child {
                margin-bottom:1vw;
            }
            .menu-name {
                font-size: 12px;
            }
            text-align: center;
            i {
                font-size: 6vw;
            }
            .active {
                color: #602C88;
            }
        }
    }
</style>